import React from 'react';

export default class WechatUserSettingList extends React.Component {
  constructor(props) {
    super(props)
  }

  renderList() {
    var self = this;
    var content = [];
    if (this.props.data) {
      this.props.data.forEach(function(data, index) {
        var name = "";
        var propertyName = "";
        var unit = data.unit;
        if (unit) {
          var sys_user = unit.sys_user;
          if (sys_user) {
            name = sys_user.firstName+" "+sys_user.lastName
          }
          var property = unit.property;
          if (property) {
            propertyName = property.name;
          }
        }
        var className = "other";
        if (data.user_type == '租户') {
          className = "tenant"
        }else if (data.user_type == '业主') {
          className = "master"
        }
        content.push((
          <tr className={className}>
            <td>{data.unit.unit_desc}</td>
            <td>{data.username}</td>
            <td>{data.wechat_user.wechatNickname}</td>
            <td>{data.mobile}</td>
            <td>{data.user_type}</td>
            {
              // <td>{propertyName}</td>
              // <td>{name}</td>
            }

            <td className="infoTd">
              <a className="info" onClick={(event)=>self.props.onEditClick(index)}>详情</a>
              <a className="delete" onClick={(event)=>self.props.onDeleteClick(index)}>解除绑定</a>
              <a className="delete" onClick={(event)=>self.props.onDetailClick(data.unit.unit_number)}>查看绑定情况</a>
            </td>
          </tr>
        ))
      })
    }

    return content
  }

  render() {
    return(
      <div className="WechatUser-setting-list setting-list">
        <table className="table">
          <thead>
            <tr className="table-title">
              <th>户号</th>
              <th>姓名</th>
              <th>微信昵称</th>
              <th>联系方式</th>
              <th>类型</th>
              {
                // <th>物业</th>
                // <th>物业管家</th>
              }

              <th className="infoTh">详情</th>
            </tr>
          </thead>
          <tbody>
            {this.renderList()}
          </tbody>
        </table>
      </div>
    )
  }
}
